<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>一卡通激活</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/onecard.css" />
		<link href="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.css"	rel="stylesheet" /> 
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/custominput.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.js"></script>
	</head>
	<body>
		<div id="header_bg"  style="display: block;">
			<div id="header_bg_blue">
				<div id="header">
					<img id="hearder_img" src="${pageContext.request.contextPath}/bettery/img/one_card_head.gif">
					<span>一卡通激活</span>
				</div>
			</div>
		</div>
<div id="header_bg1"  style="display: none;">
    <div id="header_bg_blue1">
        <div id="header1">
            <img src="${pageContext.request.contextPath}/bettery/img/tick.gif">
            <span>恭喜您,激活成功！</span>
        </div>
    </div>
</div>  
		<div id="content" style="display: block;">
			<script>
function clearText(field)
{
	if (field.defaultValue == field.value)
		field.value = '';
	else if (field.value == '')
		field.value = field.defaultValue;
}
</script>
			<form id='searchForm' method="post" onsubmit="">
				<input type="text" placeholder="请输入你的姓名" value="${model.name}" maxlength="20" class="inputs" id="model_name" name="model.name" onfocus="clearText(this)" onblur="clearText(this)">

				<input type="tel" placeholder="请输入你的手机号码" value="${model.mobi}" maxlength="11" class="inputs" id="model_mobi" name="model.mobi" onfocus="clearText(this)" onblur="clearText(this)">

				<input type="text" placeholder="请输入你的一卡通号" value="${model.cardNo}" maxlength="30" class="inputs" id="model_cardNo" name="model.cardNo" onfocus="clearText(this)" onblur="clearText(this)">

				<input type="text" placeholder="获取一卡通的联盟店编号" value="" class="inputs" maxlength="100" id="model_mendAddress" name="model.mendAddress" onfocus="clearText(this)" onblur="clearText(this)">
				
				<div class="inputs" id="text_checked">
					<label id="checked_la">获取方式
					</label>
					<div id="view" class="toggle">
						<input type="radio" name="getType" id="view-list" value="换购电池" />
						<label for="view-list">
							换购电池
						</label>
						<input type="radio" name="getType" id="view-grid" value="买新车" />
						<label for="view-grid">
							买新车
						</label>
						<input type="radio" name="getType" id="view-grid" value="其他" />
						<label for="view-grid">其他
						</label>
					</div>
				</div>
				<a class="inputs" onclick="javascript:setActive();" style="display:block;text-align: center;width: 85%;line-height: 35px;" id="text_submit1">立即激活</a>
				
			</form>
		</div>
		<div id="content1" style="display: none;">
			<p id="p1">
				尊敬的
				<span id="custumName">SSS</span>，我们很高兴的通知您：您的一卡通激活成功！
			</p>
			<p id="p2">
				此一卡通已预存
				<span>100</span>元，您可以在得威全国加电站用于加电服务。
			</p>
			<p id="p3" style="font-size:12px">
凭一卡通及原厂认证标志，我们将为您提供全国联保服务！<br/>当您的电动车在路途中出现故障，点击我要维修按钮，我们将为您提供更便捷的联盟店维修服务!
</p>
			<a class="inputs" onclick="javascript:closeWindow();" style="display:block;text-align: center;width: 88%;line-height: 35px;" id="btn1">我知道了</a>
			
			
			<input id="hidetoken" type="hidden" value="1" >
		</div>
		<script type="text/javascript">
			var hidetoken=1;
$(function()
{
	$("#hidetoken").val(1);
	hidetoken=$("#hidetoken").val();//做防重复提交使用
	$('input').customInput();
    $('.toggle').each(function(){
        $('div:first',this).addClass('first');
        $('div:last',this).addClass('last');
    });
	jQuery.validator.addMethod("mobilePhone", function(value, element)
	{
		var length = value.length;
		var tel = /^((1[3|4|5|8]{1}[0-9]{1})+\d{8})$/;
		return this.optional(element) || (length == 11 && tel.test(value));
	}, "格式错误 ");
	jQuery.validator.addMethod("cardNo", function(value, element)
	{
		var length = value.length;
		var tel = /^(([A-Z]{1})+\d{7})$/;
		return this.optional(element) || (length == 8 && tel.test(value));
	}, "格式错误 ");
	validator = $("#searchForm").validate(
	{
		rules :
		{
			"model.name" :
			{
				required : true
			},
			"model.mobi" :
			{
				required : true,
				mobilePhone : true
			},
			"model.cardNo" :
			{
				required : true,
				cardNo:true,
				remote :
				{
					url : 'checkOneCard.do'
				}
			}
		},
		messages :
		{
			"model.name" :
			{
				required : "请填写您的姓名"
			},
			"model.mobi" :
			{
				required : "请填写您的手机号"
			},
			"model.cardNo" :
			{
				required : "请填写一卡通号码",
				cardNo:"格式错误",
				remote : "该卡已经激活"
			}
		}
	});
});
function setActive()
{
	if (validator.form())
	{
	var name = $("#model_name").val();
	var mobi = $("#model_mobi").val();
	var card = $("#model_cardNo").val();
	var address = $("#model_mendAddress").val();
	var type=$('input[name="getType"]:checked').val();
	if(hidetoken==$("#hidetoken").val()){
		$("#hidetoken").val("2");
	$.ajax(
	{
		url : 'saveStateActive.do?t=' + (new Date()),
		type : 'post',
		data :
		{
			'model.name' : name,
			'model.cardNo' : card,
			'model.mobi' : mobi,
			'model.mendAddress' : address,
			'model.getType' : type
		},
		dataType : 'json',
		success : function(data)
		{
			if (data.success)
			{
				$("#header_bg1").show();$("#content1").show();
				$("#content").hide();$("#header_bg").hide();
				$("#custumName").html($("#model_name").val());
			}
			else
			{
			$.confirm(
			{
				'title' : '提示',
				'message' : data.message,
				'buttons' :
				{
					'确定' :
					{
						'class' : 'blue',
						'action' : function()
						{
						}
					}
				}
			});
			}
		}
	});}
	}
}
function closeWindow()
{
	var ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == "micromessenger")
	{
	WeixinJSBridge.call('closeWindow');
	}
	else
	{
	if (navigator.userAgent.indexOf("MSIE") > 0)
	{
	if (navigator.userAgent.indexOf("MSIE 6.0") > 0)
	{
	window.opener = null;
	window.close();
	}
	else
	{
	window.open('', '_top');
	window.top.close();
	} 
	}
	else if (navigator.userAgent.indexOf("Firefox") > 0)
	{
	window.location.href = 'about:blank ';
	}
	else
	{
	$("#searchForm").submit();
	}
	}
}
</script>
	</body>
</html>